<!--回复的作者-->
<script setup>
import Medal from "@/components/common/Medal.vue";
import ReplyAuthorName from "@/components/common/ReplyAuthorName.vue";
import {AccountStatus} from "@ginstone/nga-api/dist/src/enums/AccountStatus";
import {toRefs} from "vue";
import {setupMapState} from "@/assets/js/vuexUtils";
import {replaceResource} from "@/assets/js/routerUtils";

const props = defineProps({
  data: {type: Object},
  hideAvatar: {type: Boolean},
  hideInfo: {type: Boolean},
})
const {ipLocation} = setupMapState("User", ['ipLocation']);

const {data} = toRefs(props)

</script>

<template>
  <div v-if="data">
    <div class="space-between">
      <div class="block">
        <!--作者名称-->
        <reply-author-name :data="data"/>
        <!--作者状态 NUKED 或注销-->
        <el-tag v-if="data.accountStatus===AccountStatus.NUKED" effect="dark" type="danger">NUKED</el-tag>
        <el-tag v-if="data.accountStatus===AccountStatus.UNREGISTERED" effect="dark" type="danger">已注销</el-tag>
        <el-tag v-if="data.accountStatus===AccountStatus.NOT_ACTIVATED" effect="dark" type="danger">未激活</el-tag>
      </div>
      <div v-if="ipLocation[data.userId]" class="block">
        <el-tag effect="dark" type="danger">{{ ipLocation[data.userId] }}</el-tag>
      </div>
    </div>
    <!--作者头像-->
    <div v-if="data.avatar && !hideAvatar" class="avatar">
      <img :src="replaceResource(data.avatar)" alt="" style="max-width: 50%;border: solid"/>
    </div>
    <!--作者个人信息-->
    <el-descriptions v-if="!data.anonymous &&!hideInfo" :column="2">
      <el-descriptions-item v-if=" data.group" label="用户组">{{ data.group.name }}({{ data.group.id }})</el-descriptions-item>
      <el-descriptions-item v-if=" data.reputation" label="声望">{{ data.reputation.label }}({{ data.reputation.value }})</el-descriptions-item>
      <el-descriptions-item v-if=" data.prestige" label="威望">{{ data.prestige / 10 }}</el-descriptions-item>
      <el-descriptions-item v-if=" data.postCount" label="发帖">{{ data.postCount }}</el-descriptions-item>
      <el-descriptions-item v-if=" data.medals" label="徽章">
        <medal v-for="item in data.medals" :data="item"/>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped>
.avatar {
  text-align: center;
  width: 100%;
}


</style>